<template>
  <div class="container">
    <!-- 查询条件 -->
    <div class="filters">
      <el-input
        v-model="filters.EngName"
        placeholder="请输入引擎名称"
        class="filter-input"
        clearable
      />
      <el-select
        v-model="filters.EngineType"
        placeholder="选择引擎类型"
        class="filter-input"
        clearable
      >
        <el-option label="类型 1" :value="300" />
        <el-option label="类型 2" :value="2" />
        <el-option label="类型 3" :value="3" />
      </el-select>
      <el-button type="primary" @click="fetchData" class="search-btn"
        >查询</el-button
      >
    </div>

    <!-- 卡片展示 -->
    <div class="card-list" :style="`height:${view.height-300}px`"  >
      <el-card
        v-for="item in engineData"
        :key="item.OBJID"
        class="engine-card1"
        width="400px"
        :style="`;background:${
      isDark ? 'linear-gradient(145deg, #2e2e2e, #3c3c3c);' : '#fff'
    };`"
      >
        <div class="engine-card-content">
          <!-- 左侧引擎图标 -->
          <div class="icon">
            <el-image
              :src="item.icon || defaultIcon"
              fit="contain"
              style="width: 100px; height: 100px; border-radius: 10px"
              alt="Engine Icon"
            />
          </div>

          <!-- 右侧信息区域 -->
          <div class="info">
            <!-- 上部区域 -->
            <div class="top-section">
              <h3 class="name">{{ item.EngName }}</h3>
              <p class="description">{{ item.NetWork }}</p>
              <p class="engine-type">
                <span>引擎类型：</span>{{ item.EngineType }}
              </p>
            </div>
          </div>
        </div>

        <!-- 下部区域 -->
        <div class="bottom-section">
          <div class="train-info">
            <p><strong>训练名称：</strong>{{ item.TrainName }}</p>
            <p><strong>训练路径：</strong>{{ item.TrainPath }}</p>
          </div>
          <div class="detect-info">
            <p><strong>检测名称：</strong>{{ item.DetectName }}</p>
            <p><strong>检测路径：</strong>{{ item.DetectPath }}</p>
          </div>
          <div class="extra-info">
            <p><strong>备注：</strong>{{ item.Mark || "无" }}</p>
          </div>
          <div class="extra-info">
            <p>
              <el-icon>
                <InfoFilled />
              </el-icon>
              &nbsp; <strong>创建时间：</strong>{{ item.CREATE_TIME }}
            </p>
          </div>
        </div>
      </el-card>
    </div>
  </div>
  <div class="pagination">
       <!-- 分页 -->
       <el-pagination
       :current-page="pagination.page"
        :page-size="pagination.pageSize"
        :total="pagination.total"
        @current-change="handlePageChange"
        layout="total, prev, pager, next, jumper"
      ></el-pagination>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import {
  ElInput,
  ElSelect,
  ElOption,
  ElButton,
  ElCard,
  ElPagination,
  ElTag,
  ElImage,
  ElIcon,
} from "element-plus";
import axios from "axios";
import { InfoFilled } from "@element-plus/icons-vue";
import { useDark, useToggle } from "@vueuse/core";
let isDark = ref(useDark());
const filters = reactive({
  EngName: "",
  EngineType: undefined,
});

const engineData = ref<any[]>([]);

const pagination = reactive({
  page: 1,
  pageSize: 10,
  total: 0,
});

const defaultIcon =
  "https://img0.baidu.com/it/u=1727109705,2461211554&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"; // 默认图标链接

// 请求数据的方法
const fetchData = async () => {
  try {
    const response = await axios.get("/algorithmApi/engine-info/query", {
      params: {
        EngName: filters.EngName,
        EngineType: filters.EngineType,
        page: pagination.page,
        limit: pagination.pageSize,
      },
    });
    engineData.value = response.data.data;
    pagination.total = response.data.total;
  } catch (error) {
    console.error("查询失败", error);
  }
};

// 处理分页变化
const handlePageChange = (page: number) => {
  pagination.page = page;
  fetchData(); // 根据新的分页请求数据
};

// Managing the window height
const view = reactive({
  height: window.innerHeight,
});


// 初始化数据
onMounted(() => {
  fetchData();
});
</script>

<style lang="scss" scoped>
.container {
  padding: 20px;
  // background-color: #121212; /* 更深的黑色背景 */
}

.filters {
  margin-bottom: 20px;
  display: flex;
  gap: 15px;
  align-items: center;
}

.filter-input {
  width: 220px;
}

.search-btn {
  background-color: #409eff;
  color: white;
  border-radius: 5px;
}

.card-list {
  display: flex;
  flex-wrap: wrap;
  margin-top: 20px;
}

.engine-card1 {
  background: linear-gradient(145deg, #2e2e2e, #3c3c3c);
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  margin-right: 20px;
  height: 400px;
  width: 350px;
}

.engine-card-content {
  display: flex;
  align-items: flex-start;
  padding: 15px;
}

.icon {
  margin-right: 20px;
}

.info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.top-section {
  margin-bottom: 10px;

  .name {
    font-size: 22px;
    margin: 0 0 5px;
    font-weight: bold;
  }

  .description {
    color: #ccc;
    margin: 0 0 10px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    width: 300px;
  }

  .engine-type {
    color: #b0bec5;
  }
}

.train-info,
.detect-info {
  margin-bottom: 10px;
}

.train-info p,
.detect-info p {
  margin: 5px 0;
  word-break: break-all;
}

.extra-info {
  display: flex;
  flex-direction: column;
  word-break: break-all;
}

.extra-info p {
  margin: 5px 0;
  display: flex;
  align-items: center;
  word-break: break-all;
}

.extra-info el-icon {
  margin-right: 5px;
  color: #409eff;
}

.pagination {
  margin-top: 30px;
  text-align: center;
  padding-left: 20px;
}
</style>

<style lang="scss">
.engine-card1 {
  .el-card__body {
    padding: 10 !important;
  }
}
</style>